<!DOCTYPE html>
<html lang="en" style="width: 100%;height: 100%;margin: 0;">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no,">
    <title>文字</title>
    <script src="../../../js/ColorUtil.js"></script>
</head>
<body style="width: 100%;height: 100%;margin: 0">

<canvas id="myCanvas" style="display: block">
    Your browser does not support the HTML5 canvas tag.
</canvas>

<script type="text/javascript">

    var c = document.getElementById("myCanvas");
    c.width = window.innerWidth;
    c.height = window.innerHeight;


    var ctx = c.getContext("2d");

    function draw() {

        var fontSize = 0;
        var text = '呵呵哒';
        var textWidth = 0;

        var gradient;

        for (var i = 0; i < 200; i++) {
            //不写字体不行，无效，默认10px sans-serif
            fontSize = 20 + Math.random() * 60;

            ctx.font = fontSize + "px songti";
            // console.log(ctx.font);

            textWidth = ctx.measureText(text).width;


            var tX = Math.random() * (c.width - fontSize);

            //渐变是基于画布的坐标（x0,y0,x1,y1）
            gradient = ctx.createLinearGradient(tX, 0, tX + textWidth, 0);
            gradient.addColorStop("0", ColorUtil.randomColor());
            gradient.addColorStop("0.5", ColorUtil.randomColor());
            gradient.addColorStop("1.0", ColorUtil.randomColor());
            ctx.strokeStyle = gradient;

            ctx.save();
            ctx.rotate(Math.random() * 2 * Math.PI);
            ctx.strokeText(text, tX, fontSize + Math.random() * (c.height - 2 * fontSize));
            ctx.restore();
            // Create gradient

        }

    }

    var drawCount = 0;
    var timmer = setInterval(function () {
        if (drawCount >= 50) {
            clearInterval(timmer);
            return;
        }
        draw();
        drawCount++;
    }, 100);
</script>

</body>
</html>
